<!-- 教师端元数据查看模块 -->
<template>

  <el-form :model="form" ref="formRef" label-width="80px" class="form-container">
    <el-row :gutter="20">
      <!-- 论文题目 -->
      <el-col :span="5">
        <el-form-item label="论文题目">
          <el-input
            class="input"
            v-model="form.title"
            placeholder="请输入论文题目"
          />
        </el-form-item>
      </el-col>

      <!-- 学生学号 -->
      <el-col :span="5">
        <el-form-item label="学生学号">
          <el-select
            class="select"
            v-model="form.accout"
            filterable
            clearable
            placeholder="请选择学生学号"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 学生姓名 -->
      <el-col :span="5">
        <el-form-item label="学生姓名">
          <el-select
            class="select"
            v-model="form.name"
            filterable
            clearable
            placeholder="请选择学生姓名"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 毕业年份 -->
      <el-col :span="5">
        <el-form-item label="毕业年份">
          <el-select
            class="select"
            v-model="form.graduateYear"
            filterable
            clearable
            placeholder="请选择毕业年份"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 按钮 -->
      <el-col :span="4">
        <el-form-item label="">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
    <div class="all">
        <el-table
            :data="tableData"
            style="width: 100%"
            height="450"
            >
            
            <el-table-column
            fixed
            prop="title"
            label="论文题目"
            width="200"
            :align="'center'"
            >
              <template #default="{ row }">
                <a :href="row.path" download style="color:#409EFF; text-decoration:none;">
                  {{ row.title }}
                </a>
              </template>
            </el-table-column>
            <el-table-column
            prop="sid"
            label="学生学号"
            :align="'center'"
            >
            </el-table-column>
            <el-table-column
            prop="sname"
            label="学生姓名"
            :align="'center'"
            >
            </el-table-column>
            <el-table-column
            prop="major"
            label="专业名称"
            :align="'center'"
            >
            </el-table-column>
 
            <el-table-column
            prop="metatime"
            label="论文完成时间"
            :align="'center'"
            >
            </el-table-column>


            <el-table-column
            prop="submitName"
            label="论文上传用户"
            :align="'center'"
            >
            </el-table-column>
            <el-table-column
            prop="time"
            label="论文上传时间"
            :align="'center'"
            >
            </el-table-column>
            <el-table-column
            prop="template"
            label="对应模板"
            :align="'center'"
            >
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button type="text" @click="openDialog('score', scope.row)">
                  论文统计数据详情
                </el-button>
              </template>
            </el-table-column>
            
     
        </el-table>
        <!-- 表格外的弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
          <div v-if="dialogType === 'score'">
            <el-table :data="scoreList" style="width: 100%">
              <el-table-column prop="parameter" label="参数" align="center" />
              <el-table-column prop="value" label="值" align="center" />
              <el-table-column prop="template" label="模版值" align="center" />
            </el-table>
          </div>
          <template #footer>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </template>
        </el-dialog>
    </div>
    <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import { Delete } from '@element-plus/icons-vue'
    import { ElMessageBox, ElMessage } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    '删除操作涉及到该学生信息对应的所有拆分、抽取、评分数据，是否要删除？?', 
    '警告', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
    // 每个下拉框独立的数据源
    const value1 = ref('')
    const value2 = ref('')
const form = reactive({
  title: '',
  major: '',
  studentName: '',
  graduateYear: '',
})
    const options1 = [
    { value: '1', label: '2023' },
    { value: '2', label: '2022' },
    { value: '2', label: '2021' }

    ]

    const options2 = [
    { value: 'a', label: '2023319087' },
    { value: 'b', label: '2023319024' },
    { value: 'c', label: '2023319034' }
    ]

    const options3 = [
    { value: 'a', label: '张三' },
    { value: 'b', label: '李四' },
    { value: 'c', label: '王五' }
    ]
    // ------------------ 弹窗状态 ------------------
const dialogVisible = ref(false)
const dialogType = ref('')
const dialogTitle = ref('')

const tableData = ref([
  {
    title: '基于深度学习的图像识别方法研究',
    path:"/前端技术文档.docx",
    sid: '20210101',
    sname: '张三',
    major: '人工智能',
    time: '2025-06-01 17:00:00',
    metatime: '2025-05-20',
    submitName: 'admin_zs',
    template: '模板A',
    scoreList: [
      { parameter: '论文总字数', value: '10500' ,template:'12000'},
      { parameter: '章节数', value: '8' ,template: '8'},
      { parameter: '参考文献数', value: '20', template:'22'},
      { parameter: '近三年文献占比', value: '65%' ,template:'60%'},
      { parameter: '近五年文献占比', value: '85%', template:'70%'},
      { parameter: '英文文献数量', value: '6' ,template:'4'},
    ]
  },
  {
    title: '人工智能辅助教学系统的设计与实现',
    sid: '20210102',
    sname: '李四',
    major: '教育技术学',
    time: '2025-06-02 17:00:00',
    metatime: '2025-05-22',
    submitName: 'user_ls',
    template: '模板B',
    scoreList: [
      { parameter: '论文总字数', value: '9500' ,template:'12000'},
      { parameter: '章节数', value: '6' ,template: '8'},
      { parameter: '参考文献数', value: '18' , template:'22'},
      { parameter: '近三年文献占比', value: '55%' ,template:'60%'},
      { parameter: '近五年文献占比', value: '78%' , template:'70%'},
      { parameter: '英文文献数量', value: '3' ,template:'4'},
    ]
  },
  {
    title: '人工智能辅助教学系统的设计与实现',
    sid: '20210102',
    sname: '李四',
    major: '教育技术学',
    time: '2025-06-02 17:00:00',
    metatime: '2025-05-22',
    submitName: 'user_ls',
    template: '模板B',
    scoreList: [
      { parameter: '论文总字数', value: '12000' ,template:'12000'},
      { parameter: '章节数', value: '10' ,template: '8'},
      { parameter: '参考文献数', value: '25' , template:'22'},
      { parameter: '近三年文献占比', value: '72%' ,template:'60%'},
      { parameter: '近五年文献占比', value: '91%' , template:'70%'},
      { parameter: '英文文献数量', value: '8' ,template:'4'},
    ]
  }
])


// 当前行的列表数据
const scoreList = ref([])
const chapterList = ref([])

// 打开弹窗
const openDialog = (type, row) => {
  // 弹窗状态
  dialogType.value = type
  dialogVisible.value = true
  dialogTitle.value = type === 'score'
    ? `使用模板 - ${row.template}`
    : `章节列表 - ${row.template}`

  // 动态赋值
  scoreList.value = row.scoreList
  chapterList.value = row.chapterList
}
        
</script>

<style scoped>

.all{
    margin-top: 40px;
    
    margin-left: 20px;
    margin-right: 20px;
}
.lab{
    width: 70px;
}
.two{
    display: flex;
    margin-left: 30px;
    margin-top: 10px;
    gap: 20px;
}
.select{
    width: 250px;
}
.input{
    width: 250px;
}
.block{
    display: flex;
    justify-content: flex-end;
    margin: 20px;
}
.button1{
    width: 70px;
    background-color: #ff3838;
    border: #ff3838;
    margin-left: 10px;
}
.button2{
    width: 70px;
    margin-left: 10px;
}
.form-container{
  margin-top: 20px;
}

</style>
